<template>
  <div class="year-progress">
    <progress :percent="percent" activeColor="#ea5a49" />
    <p>{{year}}年已经过去了{{today}}天，{{percent}}%</p>
  </div>
</template>

<script>
  export default {
    name: 'YearProgress',
    computed: {
      year () {
        return new Date().getFullYear()
      },
      today () {
        let origin = new Date()
        origin.setMonth(0)
        origin.setDate(1)
        // 今年的第一天与今天 的 天数的差值
        let offset = new Date().getTime() - origin.getTime()
        return parseInt(offset / 1000 / 60 / 60 / 24) + 1
      },
      percent () {
        return (this.today * 100 / this.getDayofYear()).toFixed(1)
      }
    },
    methods: {
      isLeapYear () { // 是否闰年
        const year = new Date().getFullYear()
        if (year % 400 === 0) {
          return true
        } else if (year % 4 === 0 && year % 100 !== 0) {
          return true
        } else {
          return false
        }
      },
      getDayofYear () {
        return this.isLeapYear() ? 366 : 365
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .year-progress
    margin 10px 0 40px
    text-align center
</style>
